<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>TA的主页</title>
		<link rel="stylesheet" href="css/weui.min.css">
		<script src="js/main.js"></script>
		<style type="text/css">
			.user-bg {
				width: 100%;
				height: 250px;
			}
			
			.user-bg img {
				width: 100%;
				height: 100%;
			}
			
			.user-info {
				margin: 100px 20px 0 20px;
				position: relative;
			}
			
			.user-self {
				display: flex;
				padding: 0 15px;
				justify-content: center;
				align-items: center;
				margin-top: -65px;
			}
			
			.user-icon {
				width: 80px;
				height: 80px;
				margin-left: 15px;
				border: 1px solid #878787;
			}
			
			.user-icon img {
				width: 100%;
				height: 100%;
			}
			
			.username {
				flex: 1;
				text-align: right;
			}
			
			.username h1 {
				font-size: 24px;
				font-weight: 500;
				color: #fff;
			}
			
			.weui-media-box__bd .black {
				color: #000;
			}
			
			.text_center {
				text-align: center;
			}
			
			.weui-media-box__thumb {
				width: 100%;
				height: 100%;
			}
			
			.submit {
				width: 30px;
				height: 25px;
			}
			
			.mt0 {
				margin-top: 0;
			}
			
			.header_nav {
				background-color: #373b3e;
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 999;
			}
			
			.back {
				width: 30px;
				height: 25px;
			}
		</style>
	</head>

	<body>
		<div class="weui-cells mt0 header_nav">
			<div class="weui-cell">
				<div class="weui-cell__hd">
					<a href="javascript:history.go(-1)">
						<div class="back">
							<img src="images/left.png" alt="">
						</div>
					</a>
				</div>
				<div class="weui-cell__bd"></div>
				<div class="weui-cell__ft"></div>
			</div>
		</div>
		<div class="container">
			<div class="user-bg">
				<img src="images/bg.jpg" alt="">
			</div>
			<div class="user-self">
				<!-- 用户昵称 -->
				<div class="username">
					<h1 id="userName"></h1>
				</div>
				<!-- 用户头像 -->
				<div class="user-icon">
					<img id="userImg" src="" alt="">
				</div>
			</div>
			<div class="weui-panel weui-panel_access">
				<div class="weui-panel__bd">
					<!-- <a href="article_datile.html" class="weui-media-box weui-media-box_appmsg">
	                <div class="weui-media-box__hd">
	                    <img class="weui-media-box__thumb" src="images/zqxj.jpg" alt="">
	                </div>
	                <div class="weui-media-box__bd">
	                    <p class="weui-media-box__desc black">文章.......</p>
	                    <p class="weui-media-box__desc">2017-08-17</p>
	                </div>
	            </a> -->
				</div>
			</div>
			<div class="text_center" style="padding: 10px;" id="status">加载中...</div>
		</div>

	</body>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="js/Url.js"></script>
	<script type="text/javascript">

		var loadMark = true;

		// 获取openid
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r != null)
				return unescape(r[2]);
			return "";
		}
		var openid = getQueryString("openid");


		// $('.back').on('click', function() {

  //           window.location.href = '/income.html';
		// })
		
		var startPage = 1;
		// var openid = 'oA6ZDwZHvNpv4MPOl1KTvC1Z7HDo';
		console.log(startPage);
		// 请求数据
		function sendData() {
			if(loadMark === false) {
				return;
			};
			loadMark = false;
			console.log(startPage);
			$.ajax({
				url: baseUrl + 'foot/user/selectUsermoodsByOpenid',
				type: 'GET',
				dataType: 'json',
				// data: JSON.stringify(params),
				data: {
					'startPage': startPage,
					'openid':openid
				},
				success: function(res) {
					$('#userName').text(res.data.nickName);
					$("#userImg").attr('src', res.data.headImgurl);
					console.log(res);
					if(res.data.value.length == 0) {
						loadMark = false;
						noData();
					} else if(res.data.value.length < 8) {
						createHtml(res.data.value);
						loadMark = false;
						status();
					} else {		
						createHtml(res.data.value);
						startPage += 1;
						console.log(startPage);
						loadMark = true;
					}

				}
			})
		}

		sendData();

		// 创建渲染列表
		function createHtml(item) {
			for(var i = 0, leng = item.length; i < leng; i++) {
				var str = '';
				str += '<a href="articleDatile.html?id=' + item[i].id + '" class="weui-media-box weui-media-box_appmsg">';
				str += '<div class="weui-media-box__hd">';
				str += '<img class="weui-media-box__thumb" src="' + baseUrl + item[i].contentImg + '" alt="">';
				str += '</div>';
				str += '<div class="weui-media-box__bd">';
				str += '<p class="weui-media-box__desc black">' + item[i].conntent + '</p>';
				str += '<p class="weui-media-box__desc">' + getLocalTime(item[i].createTime) + '</p>';
				str += '<div class="ui_cell_ft"></div>';
				str += '</div>';
				str += '</a>';
				$('.weui-panel__bd').append(str);
			}
		}

		// 时间戳转换
		function getLocalTime(nS) {
			return new Date(parseInt(nS)).toLocaleString();
		}

		function isBottom() {
			var scrollHeight = document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight;
			var scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
			var clientHeight = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
			// console.log(scrollTop);
			// console.log(clientHeight);
			// console.log(scrollHeight);

			if((scrollTop + clientHeight) >= (scrollHeight - 50)) {
				this.sendData();
			}

		}

		// 没有数据
		function noData() {
			$('#status').html('暂时没有动态!');
		}

		// 已经加载完所有数据
		function status() {
			$('#status').html('已经到底啦！');
		}

		$(window).scroll(function() {
			this.isBottom();
		});
		isBottom();
	</script>

</html>